<template>
  <!-- 使用根模块的state数据 -->
  <div>
    {{$store.state.username}}
  </div>
  <button @click="fn">改变名字</button>
  <button @click="$store.commit('editname')">改变</button>
  <button @click="$store.dispatch('updatename')">三秒后改变名字</button>
  <!-- 使用根模块getters的数据 -->
  <div>{{$store.getters['newname']}}</div>

</template>

<script>
import { useStore } from 'vuex'
  export default{
    name:'App',
    setup(){
      //使用vuex仓库
      const store=useStore()
      //使用根模块的state数据
      console.log(store.state.username);
      //使用根模块getters的数据
      console.log(store.getters.newname);
      // store.commit('editname')
      const fn=()=>{
        //调用根模块mutations函数
        store.commit('editname')
      }
      //调用根模块actions函数
      // store.dispatch('updatename');
      return {fn}
    }
  }
</script>

<style>

</style>
